<!--
- Author:  LiShibin.
- Date:    2017/7/24 0024.
- File:    message-code.
-->
<template>
  <div>
    <span :class="[classes]" :style="sendedStyleShow" @click="getMessageCode">{{messageBtnTxt}}</span>
  </div>
</template>

<script>
  import * as validator from '../validator'
  export default{
    data() {
      return {
        // 发送验证码 是否在冷却中
        cooling: false,
        // 最大等待时间
        coundownMax: 60,
        // 剩余等待时间
        countdown: 60,
        messageBtnTxt: '发送验证码',
        updateCountdown: null // 获取短信验证码 倒计时的定时器
      }
    },
    props: {
      type: { // 注册 1， app验证码登录 2
        type: String,
        default: function () {
          return '1'
        }
      },
      tel: {
        type: String,
        default: function () {
          return ''
        }
      },
      classes: {
        type: String,
        default: function () {
          return ''
        }
      },
      sendedStyle: {
        type: Object,
        default: function () {
          return {}
        }
      },
      callback: {
        type: Function,
        defualt: function () {
          return function () {
          }
        }
      }
    },
    computed: {
      sendedStyleShow: function () {
        return this.cooling ? this.sendedStyle : {}
      }
    },
    methods: {
      getMessageCode() {
        if (!validator.phone(this.tel)) {
          this.$toast('请输入正确的手机号')
          return
        }
        // 更新倒计时
        if (this.cooling) {
          return
        }
        this.cooling = true
        if (this.type == '1') {
          this.$request.getMessageCode(this.tel).then((data) => {
            this.$toast('短信验证码发送成功，请注意查收')
            this.callback(data)
            this.refreshBtn()
          }).catch(e => {
            this.cooling = false
            this.$toast('获取短信验证码失败：' + e.msg)
          })
        } else if (this.type == '2') { // app登录获取验证码
          this.$request.getMessageCode2(this.tel).then((data) => {
            this.$toast('短信验证码发送成功，请注意查收')
            this.callback(data)
            this.refreshBtn()
          }).catch(e => {
            this.cooling = false
            this.$toast('获取短信验证码失败：' + e.msg)
          })
        }
      },
      refreshBtn() {
        clearInterval(this.updateCountdown)
        this.messageBtnTxt = '重新获取(' + this.countdown + ')'
        this.updateCountdown = setInterval(() => {
          this.messageBtnTxt = '重新获取(' + this.countdown + ')'
          if (this.countdown <= 0) {
            this.countdown = this.coundownMax
            this.cooling = false
            clearInterval(this.updateCountdown)
            this.messageBtnTxt = '发送验证码'
            return
          }
          this.countdown--
        }, 1000)
      }
    }
  }
</script>

<style>
  .message-code-btn {
    position: absolute;
    width: 4.5rem;
    display: block;
    height: 1.6rem;
    line-height: 1.6rem;
    text-align: center;
    font-size: .65rem;
    border-radius: 1rem;
    display: block;
    top: .25rem;
    right: .25rem;
    color: #45a73a;
    border: 1px #45a73a solid;
  }

  .message-code-btn-cooling {
    color: #999999;
    border: 1px solid #999999;
  }
</style>